<template>
    <h1>注册</h1>

    <form @submit.prevent="handleRegister">
        <label for="name">用户名：</label>
        <input v-model="name" id="name" />

        <label for="email">邮箱：</label>
        <input v-model="email" type="email" id="email" placeholder="email" />

        <label for="password">密码：</label>
        <input v-model="password" type="password" id="password" placeholder="password" />

        <button type="submit">注册</button>
    </form>

    <div v-if="showTip" class="tip">
        {{ tipMessage }}
    </div>

</template>

<script lang="ts" setup>
import { ref } from 'vue'
import router from '@/router'
import { registerAPI } from '@/service/API';

const name = ref('')
const email = ref('')
const password = ref('')
const tipMessage = ref('')
const showTip = ref(false)

const handleRegister = async () => {
    const { R_registerAPI, message } = await registerAPI(email.value, password.value, name.value);
    if (R_registerAPI) {
        router.push('/login');
        return
    }
    tipMessage.value = message
    showTip.value = true
}

</script>

<style scoped></style>